<template>
  <div class="child">
    <h2>我是 child 组件</h2>
    <h3>{{ title }}</h3>
    <h3>{{ msg }}</h3>
    <h3>{{ newMsg }}</h3>
    <button @click="changeMsg">点击修改 msg</button>
    <button @click="changeFatherMsg">点击修改父组件的 msg</button>
  </div>
</template>

<script>
export default {
    // props: ['title', 'msg'],
    props:{
        title: {
            default: "初始值",
            type: String
        },
        msg: {
            default: "初始值",
            type: String
        },
        num: {
            default: 888,
            type: Number
        }
    },
    data(){
        return {
            newMsg: ""
        }
    },
    created(){
        this.newMsg = this.msg;
    },
    methods: {
        changeMsg(){
            this.newMsg = "子组件修改 Props 的值"
        },
        changeFatherMsg(){
            this.$emit("changeFatherMsg")
        }
    }
}
</script>

<style>

</style>